import React, { useState } from 'react'
import { type ControlPanelProps } from 'src/interface'
import musicJpg from '../music.jpg'
import { CloseIcon, FullScreenIcon, LyricIcon, ModeIcon, MusicIcon, NextIcon, PauseIcon, PlayIcon, PrevIcon, ThemeIcon, VolumeIcon } from './Icon'
import { Dropdown, Slider, type MenuProps, ConfigProvider, Switch, type DropdownProps } from 'antd'

function MiniControlPanel (props: ControlPanelProps): JSX.Element {
  const audio = props.audio
  const iconColor = props.iconColor
  const [open, setOpen] = useState(false)
  const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {
    if (info.source === 'trigger' || nextOpen) {
      setOpen(nextOpen)
    }
  }
  const items: MenuProps['items'] = [
    {
      label: <span className="player-control">播放 / 暂停</span>,
      key: 'play',
      icon: <>
        {props.playing ? <PauseIcon fill={iconColor} icons={props.playerIcons} size={22} /> : <PlayIcon fill={iconColor} icons={props.playerIcons} size={22} />}
      </>

    },
    {
      label: <span className="player-control">上一首</span>,
      key: 'prev',
      icon: <PrevIcon fill={iconColor} icons={props.playerIcons} size={20} />

    },
    {
      label: <span className="player-control">下一首</span>,
      key: 'next',
      icon: <NextIcon fill={iconColor} icons={props.playerIcons} size={20} />
    },
    {
      label: <Slider style={{ margin: '0 0 0 10px' }} min={0} max={1} step={0.01} value={props.volumeSliderValue} className="volume-slider" onChange={props.onChangeVolumeSlider} tooltip={{ open: false }} keyboard={false} />,
      key: 'volumn',
      icon: <VolumeIcon fill={iconColor} icons={props.playerIcons} volume={props.volumeSliderValue} size={20} />
    },
    {
      label: <span className="player-control">播放模式</span>,
      key: 'playMode',
      icon: <ModeIcon fill={iconColor} icons={props.playerIcons} size={20} playMode={props.playMode} />
    },
    {
      label: <span className="player-control">{props.showLyric ? '关闭桌面歌词' : '显示桌面歌词'}</span>,
      key: 'lyric',
      icon: <LyricIcon fill={iconColor} icons={props.playerIcons} show={props.showLyric} size={20} />
    },
    {
      label: <span className="player-control">
                <ConfigProvider wave={{ disabled: true }}>
                  <Switch checkedChildren="L" unCheckedChildren="D" size="small" checked={props.playerTheme === 'light'} onChange={props.onChangePlayTheme} />
                </ConfigProvider>
              </span>,
      key: 'theme',
      icon: <ThemeIcon fill={iconColor} icons={props.playerIcons} size={20} />
    },
    {
      label: <span className="player-control">展开播放器</span>,
      key: 'full',
      icon: <FullScreenIcon fill={iconColor} icons={props.playerIcons} size={20} />
    },
    {
      label: <span className="player-control">关闭播放器</span>,
      key: 'close',
      icon: <CloseIcon fill={iconColor} icons={props.playerIcons} size={20} />
    }

  ]

  const onClick = ({ key }: { key: string }): void => {
    switch (key) {
      case 'play':
        if (props.playing) {
          props.onPause()
        } else {
          props.onPlay()
        }
        break
      case 'prev':
        props.onPlayPrev()
        break
      case 'next':
        props.onPlayNext()
        break
      case 'lyric':
        props.onShowLyric()
        break
      case 'full':
        props.onChangePanelMode('bottom')
        break
      case 'close':
        props.onClose()
        break
      case 'playMode':
        props.onChangePlayMode()
    }
  }

  return (
    <div className="mini-panel" style={{ left: props.miniStyleLeft, top: props.miniStyleTop, right: props.miniStyleRight, bottom: props.miniStyleBottom }}>
      <Dropdown
        getPopupContainer={(element) => element}
        overlayStyle={{ width: 'max-content' }}
        menu={{
          items,
          onClick
        }}
        trigger={['contextMenu', 'click']}
        onOpenChange={handleOpenChange}
        open={open}
      >
        <div className="pic">
          <img src={audio.pic ?? props.defaultAudioPic ?? musicJpg} alt="pic" />
          <div className="music-icon">
            <MusicIcon fill={iconColor} icons={props.playerIcons} />
          </div>
        </div>
      </Dropdown>
    </div>

  )
}

export default MiniControlPanel
